<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css.css" />
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<table v-if="books.length > 0">
				<thead>
					<tr>
						<th></th>
						<th>书籍名称</th>
						<th>出版日期</th>
						<th>价格</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(book, index) in books">
						<td>{{book.id}}</td>
						<td>{{book.name}}</td>
						<td>{{book.data}}</td>
						<td>{{book.price | showPrice}}</td>
						<td>
							<button @click="decrement(index)" :disabled="book.count <= 1">-</button>
							{{book.count}}
							<button @click="increment(index)">+</button>
						</td>
						<td>
							<button @click="removeHandle(index)">移除</button>
						</td>
					</tr>
				</tbody>
			</table>
			<h2 v-else="books.length <= 0">数据为空</h2>
			<h2>总价格:{{totalPrice | showPrice}}</h2>
		</div>
	</body>
	<script type="text/javascript">
		const app = new Vue({
			el: '#app',
			data: {
				books: [{
						id: 1,
						name: '《算法导论》',
						data: '2006-9',
						price: 85.00,
						count: 1
					},
					{
						id: 2,
						name: '《UNIX编程艺术》',
						data: '2006-2',
						price: 59.00,
						count: 1
					},
					{
						id: 3,
						name: '《编程珠玑》',
						data: '2008-10',
						price: 39.00,
						count: 1
					},
					{
						id: 4,
						name: '《代码大全》',
						data: '2006-3',
						price: 128.00,
						count: 1
					}
				]
			},
			methods: {
				// getPrice(price){
				// 	return '￥' + price.toFixed(2);
				// }
				increment(index) {
					this.books[index].count++
				},
				decrement(index) {
					if (this.books[index].count) {
						this.books[index].count--
					}
				},
				removeHandle(index) {
					this.books.splice(index, 1)
				}
			},
			filters: {
				showPrice(price) {
					return '￥' + price.toFixed(2);
				}
			},
			computed: {
				totalPrice() {
					let allPrice = 0;
					// for (let book of this.books) {
					// 	allPrice += book.price * book.count
					// }
					
					//console.log(allPrice);
					// for (let book in this.books) {
					// 	console.log(this.books[book].price);
					// }
					return this.books.reduce((prev, book) => {
						return prev + book.price * book.count
					}, 0)
				}
			}
		})
		const nums = [10, 20, 111, 222, 444, 40, 50];
		let newNums = nums.filter((n) => {
			return n < 100;
		})
		console.log(newNums);

		let newNums2 = newNums.map((n) => {
			return n * 2;
		})
		console.log(newNums2);

		let newNums3 = newNums2.reduce((preValue, n) => {
			return preValue + n
		}, 0)
		console.log(newNums3);

		let total = nums.filter((n) => {
			return n < 100
		}).map((n) => {
			return n * 2
		}).reduce((preValue, n) => {
			return preValue + n
		})
		console.log(total);
		
		
		
		let total2 = nums.filter(n => n < 100).map(n => n*2).reduce((pre,n) => pre+n);
		console.log(total2);
	</script>
</html>
